<template>
  <div id="app">
      <!-- 主体 -->
    <div id="main">
      <div class="contenr">
        <router-view></router-view>
      </div>
    </div>
    <!-- 脚步导航 -->
    <div id="footer">
        <div class="footer_item" :class="$route.path === '/home/waimai'? 'current' : ''"  @click="go_to('/home/waimai')">
            <span class="iconfont icon-waimai"></span>
            <span>外卖</span>
        </div>
        <div class="footer_item" :class="$route.path === '/home/sousuo'? 'current' : ''" @click="go_to('/home/sousuo')">
            <span class="iconfont icon-search"></span>
            <span>搜索</span>
        </div>
        <div class="footer_item" :class="$route.path === '/home/orders'? 'current' : ''" @click="go_to('/home/orders')">
            <span class="iconfont icon-dingdan"></span>
            <span>订单</span>
        </div>
        <div class="footer_item" :class="$route.path === '/home/my'? 'current' : ''" @click="go_to('/home/my')">
            <span class="iconfont icon-person"></span>
            <span>我的</span>
        </div>
    </div>
  </div>
</template>

<script>
    export default {
        name:"Home",
        data () {
            return {
                
            }
        },
        methods: {
            go_to(go_path) {
                this.$router.replace(go_path);
            }
        }
    }
</script>

<style lang="stylus" scoped>
  body
    background-color #f5f5f5
  #app
    height 100%
    #main
        margin 55px 0
        height 100%
        overflow hidden // 解决外margin合并  (此处遇到了这种情况) 
        // 三种解决方案 
        //     1 给父元素上边框
        //     2 给父元素上padding
        //   * 3 给父元素overflow hidden  
        .contenr
          position relative
          top 0px
          left 0px
          height: 100%
          // background-color red
          &>div
          display none
          .current_con
            display block
        .contenr>div
          height 100%
    #footer
      position fixed
      bottom 0px
      left 0px
      height 50px
      width 100%
      background-color #ffffff
      display flex
      .footer_item
          flex 1
          display flex
          flex-direction column
          align-items center
          color #7e8c8d
          &.current
              color blue
          span
              &:nth-child(1)
                  font-size 22px
              &:nth-child(2)
                  font-size 12px 
                  margin-top 7px 
</style>

<style src="../../assets/css/reset.css" scoped></style>

